<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="app">
  <!-- <select v-model="a">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>{{a}}
   用户名: <input type="text"> <br>
    密码：<input type="text"><br>
    确认密码: <input type="text"><br>
    昵称：<input type="text"><br>
    性别：<input type="file">男 <input type="file">女<br>
    兴趣爱好;<input type="checkbox">爬山 <input type="checkbox">旅游<input type="checkbox">看书<input type="checkbox">看星星<br>
    <button>提交</button> -->
    <div>
        <table border="1px">
            <thead>
                <tr>
                    <th>姓名</th>                                                       
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in arr" :key="item.id">
                    <td>{{item.name}}</td>
                    <td>{{item.chengji}}</td>
                    <td><button @click="shan(item.id)">删除</button></td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
         总分：<span>{{zong}}</span> 平均分: <span>{{pingjun}}</span>
         <button @click = "fu(60)">及格</button><button @click="bu(60)">不及格</button>
    </div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            a:'',
            arr:[{
                id:0,
                name:'小明',
                chengji:60
            },{
                id:1,
                name:'小王',
                chengji:80
            },{
                id:2,
                name:'小白',
                chengji:90
            },{
                id:3,
                name:'小张',
                chengji:55
            }]
        },
        methods:{
            fu(i){
                var a = this.arr.filter(item => item.chengji >= i)
                // this.arr.splice(a,1)
                this.arr = a
            },
            bu(i){
                var b = this.arr.filter(item => item.chengji < i)
                this.arr = b
            },
            shan(i){
                var c = this.arr.findIndex(item => item.chengji = i)
                this.arr.splice(c,1)
            }
        },
        computed:{
            zong(){
                var num = 0
                this.arr.forEach(item => {
                    num+= item.chengji
                })
                return num
            },
            pingjun(){
               return  this.zong/this.arr.length
            }
        }
    })
</script>
<style>
    
</style>
